<template>
    <div class="loading-container">
        <el-icon class="loading-icon">
            <Loading />
        </el-icon>
        <span>正在登录中...</span>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
import { getUserByCode } from '@/api/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

onMounted(async () => {
    const code = route.query.code

    try {
        // 调用后端接口换取用户对象

        const res = await getUserByCode(code)

        // 存储用户信息
        userStore.setUser(res.data)
        userStore.setToken(res.data.token)
        console.log(userStore.getUser())
        console.log(userStore.getToken())
        // 跳转到首页
        router.push('/')
    } catch (error) {
        ElMessage.error('登录失败: ' + error.message)
        router.push('/login')
    }
})
</script>

<style scoped>
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 8px;
}

.loading-icon {
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>